<template>
  <div class="userAdd">
    <el-form :model="persional" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-col :span="10" :offset="1">
        <el-form-item label="用户名" prop="userName">
          <el-input class="form_add" ref="userName" v-model.trim="persional.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户类别" prop="userType">
          <Select class="form_add" v-model="persional.userType">
            <Option v-for="item in formItem.userTypeList" :value="item.dicVal" :key="item.dicBh">{{ item.dicName }}</Option>
          </Select>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input class="form_add" v-model.trim="persional.mobile"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model.trim="persional.note" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="USBKEY设置" prop="userKey">
          <el-col :span="15"><el-input v-model.trim="persional.userKey" class="mishi form_add"></el-input></el-col>
          <el-col :span="8" :offset="1"><el-button style="height:40px;padding:0 25px;">设置</el-button></el-col>
        </el-form-item>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-form-item label="角色" prop="roles" required>
          <Select ref="roles" v-model="model10" multiple style="width:100%">
            <Option v-for="item in roles" :value="item.roleBh" :label="item.roleName" :key="item.roleBh">{{ item.roleName }}</Option>
          </Select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button class="save" type="primary" @click="save">保存</el-button>
          <el-button class="quxiao" @click="closeLayer">取消</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "userAdd",
  props: ["persional"],
  data() {
    return {
      selectform: {
        pageSize: 10
      },
      selectlist: {
        pageSize: 10000,
        dicMark:'USER_IDENTIFY'
      },
      formItem: {
        userTypeList: []
      },
      rules: {
        userName: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          { max: 200, message: "不能超出长度200", trigger: "blur" }
        ],
        note: [
          { trigger: "blur" },
          { min: 0, max: 200, message: "长度在 0 到 200 个字符", trigger: "blur" }
        ],
        roles: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个角色",
            trigger: "change"
          }
        ]
      },
      roles: [],
      model10: [],
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      this.getRoles(); //获取全部角色
      this.getRoleType(); //获取全部用户类型
      this.getUserGrant();//获取用户拥有的角色
    });
  },
  methods: {
    //关闭layer弹窗
    closeLayer() {
      layer.closeAll();
    },
    //获取用户类型
    getRoleType() {
      this.$nextTick(() => {
        axios
          .get(dictionariesURL, {
            headers: {'Authorization': appDB.get("userInfo").token},
            params: this.selectlist
          })
          .then(response => {
            let d = response.data;
            if (d.resultCode == 0) {
              this.formItem.userTypeList = d.record.rows;
            } else {
              layer.msg(d.msg);
            }
          })
          .catch(error => {
            layer.msg("网络错误");
          });
      });
    },
    //获取用户拥有的角色
    getUserGrant(){
      axios
        .get(
          usersURL+'/'+this.persional.userBh+'/'+'roles',
          {
            headers: {'Authorization': appDB.get("userInfo").token},
          }
        )
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            for(let i=0; i<d.record.length; i++){
              this.model10.push(d.record[i].roleBh) //这里用户角色是以角色编号为标识，不是角色名称，所以角色列表里存放的是角色编号，给后台返回的也是角色编号，不是角色名称
            }
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    // 获取全部角色
    getRoles() {
      axios
        .get(
          rolesURL,
          {
            headers: {'Authorization': appDB.get("userInfo").token},
            params: this.selectform
          }
        )
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.roles = d.record.rows;
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //新增
    save() {
      axios
        .put(
          usersURL+'/'+this.persional.userBh,
          {
            userName: this.persional.userName,
            userType: this.persional.userType,
            mobile: this.persional.mobile,
            note: this.persional.note,
            isLock: this.persional.isLock,
            userKey: this.persional.userKey,
            roles: this.model10
          },
          {
            headers: {'Authorization': appDB.get("userInfo").token},
          }
        )
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.closeLayer(); //关闭弹窗
            this.$parent.getUsers(); //修改成功以后重新渲染列表获得最新数据
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    }
  }
};
</script>

<style scoped>
@import "../assets/css/elementUI.css";
.userAdd {
  width: 100%;
  float: left;
  margin-top: 20px;
}
.ivu-input {
  padding: 0 7px !important;
}
.row {
  margin: 30px 0 0 0;
  padding: 0 30px;
}
.ivu-switch-checked {
  border-color: #38b824;
  background-color: #38b824;
}
.quxiao {
  background: #cecece;
  float: right;
  padding: 7px 40px;
  margin-right: 30px;
  border-radius: 30px;
}
.save {
  float: right;
  margin-right: 8%;
  border-radius: 30px;
  padding: 7px 40px;
  background: #39b423;
  border: 1px solid #39b423;
  color: #fff;
}
</style>


